<template>
    <view class="forum-detail-page">
      <!-- 顶部栏 -->
      <view class="detail-header">
        <uni-icons type="back" size="22" color="#333" @click="goBack" />
        <text class="header-title">帖子详情</text>
      </view>
  
      <!-- 帖子卡片 -->
      <view class="post-detail-card">
        <!-- 用户信息 -->
        <view class="detail-user-info">
          <image class="detail-avatar" :src="post.avatar" mode="aspectFill" @click="goToUser(post)" />
          <view class="detail-user-meta">
            <text class="detail-username" @click="goToUser(post)">{{ post.username }}</text>
            <view class="detail-meta-row">
              <text class="detail-time">{{ post.time }}</text>
              <text class="detail-category" :class="getCategoryClass(post.category)" @click="goToCategory(post.category)">{{ post.category }}</text>
            </view>
          </view>
        </view>
        <!-- 帖子内容 -->
        <view class="detail-content">
          <text class="detail-title">{{ post.title }}</text>
          <text class="detail-body">{{ post.content }}</text>
          <view v-if="post.images && post.images.length > 0" class="detail-images">
            <image
              v-for="(img, idx) in post.images"
              :key="idx"
              class="detail-image"
              :src="img"
              mode="aspectFill"
              @click="previewImage(post.images, idx)"
            />
          </view>
        </view>
        <!-- 统计区 -->
        <view class="detail-stats">
          <view class="stat-item">
            <uni-icons type="eye" size="18" color="#999" />
            <text class="stat-text">{{ post.views }}</text>
          </view>
          <view class="stat-item">
            <uni-icons type="chatbubble" size="18" color="#999" />
            <text class="stat-text">{{ post.comments }}</text>
          </view>
          <view class="stat-item" @click="toggleLike">
            <uni-icons :type="post.isLiked ? 'heart-filled' : 'heart'" size="18" :color="post.isLiked ? '#ff4757' : '#999'" />
            <text class="stat-text" :class="{ liked: post.isLiked }">{{ post.likes }}</text>
          </view>
          <view class="stat-item" @click="toggleCollect">
            <uni-icons :type="post.isCollected ? 'star-filled' : 'star'" size="18" :color="post.isCollected ? '#ffd700' : '#999'" />
            <text class="stat-text" :class="{ collected: post.isCollected }">收藏</text>
          </view>
          <view class="stat-item" @click="showShare">
            <uni-icons type="share" size="18" color="#999" />
            <text class="stat-text">分享</text>
          </view>
        </view>
      </view>
  
      <!-- 评论区 -->
      <view class="comments-section">
        <text class="comments-title">全部评论 ({{ comments.length }})</text>
        <view v-if="comments.length === 0" class="no-comments">还没有评论，快来抢沙发吧~</view>
        <view v-for="(comment, idx) in comments" :key="comment.id" class="comment-card" @longpress="tryDeleteComment(comment, idx)">
          <image class="comment-avatar" :src="comment.avatar" mode="aspectFill" @click="goToUser(comment)" />
          <view class="comment-content">
            <view class="comment-header">
              <text class="comment-username" @click="goToUser(comment)">{{ comment.username }}</text>
              <text class="comment-time">{{ comment.time }}</text>
            </view>
            <text class="comment-text">{{ comment.content }}</text>
          </view>
        </view>
      </view>
  
      <!-- 底部评论输入框 -->
      <view class="comment-input-bar">
        <input class="comment-input" v-model="commentText" placeholder="写下你的评论..." maxlength="200" @focus="onInputFocus" ref="commentInputRef" />
        <button class="send-btn" @click="sendComment">发送</button>
      </view>
    </view>
  </template>
  
  <script setup lang="ts">
  import { ref, nextTick } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
import { getForumPostDetailAPI } from '@/service/forum'
  
  const post = ref({
    id: 1,
    username: '面试达人',
    avatar: '/src/static/user-avatar.png',
    time: '2小时前',
    category: '面试经验',
    title: '字节跳动前端面试经验分享',
    content: '刚刚通过了字节跳动的前端面试，分享一下面试流程和注意事项，希望对大家有帮助...\n面试官很专业，问题也很有深度，建议大家多刷题，多准备项目细节。',
    images: ['/src/static/user-avatar.png', '/src/static/user-avatar.png'],
    views: 1234,
    comments: 56,
    likes: 89,
    isLiked: false,
    isCollected: false
  })
  
  const comments = ref([
    {
      id: 1,
      username: '技术小白',
      avatar: '/src/static/user-avatar.png',
      time: '1小时前',
      content: '感谢分享，干货满满！'
    },
    {
      id: 2,
      username: '求职者小王',
      avatar: '/src/static/user-avatar.png',
      time: '30分钟前',
      content: '请问算法题多吗？'
    }
  ])
  
  const commentText = ref('')
  const commentInputRef = ref()
  
  // 返回上一页
  const goBack = () => {
    uni.navigateBack()
  }
  // 跳转到用户主页（如无则toast）
  const goToUser = (user: any) => {
    if (user.username === '我') {
      uni.showToast({ title: '这是你自己', icon: 'none' })
    } else {
      uni.showToast({ title: `跳转到${user.username}主页`, icon: 'none' })
      // uni.navigateTo({ url: `/pages/user/profile?uid=${user.id}` })
    }
  }
  // 跳转到分类页（如无则toast）
  const goToCategory = (category: string) => {
    uni.showToast({ title: `跳转到${category}分类`, icon: 'none' })
    // uni.navigateTo({ url: `/pages/forum/category?cat=${category}` })
  }
  // 分享弹窗
  const showShare = () => {
    if (uni.showShareMenu) {
      uni.showShareMenu()
    } else {
      uni.showToast({ title: '分享功能待接入', icon: 'none' })
    }
  }
  // 评论输入聚焦
  const onInputFocus = () => {
    nextTick(() => {
      // 可做自动滚动等
    })
  }
  // 长按删除评论（仅自己评论）
  const tryDeleteComment = (comment: any, idx: number) => {
    if (comment.username !== '我') return
    uni.showModal({
      title: '删除评论',
      content: '确定要删除这条评论吗？',
      success: (res) => {
        if (res.confirm) {
          comments.value.splice(idx, 1)
          post.value.comments -= 1
          uni.showToast({ title: '已删除', icon: 'none' })
        }
      }
    })
  }
  
  const getCategoryClass = (category: string) => {
    const classMap: Record<string, string> = {
      '面试经验': 'category-experience',
      '技术分享': 'category-tech',
      '求职心得': 'category-job',
      '学习交流': 'category-study',
      '职场感悟': 'category-career',
      '面试技巧': 'category-skills'
    }
    return classMap[category] || 'category-default'
  }
  
  const previewImage = (images: string[], index: number) => {
    uni.previewImage({
      current: index,
      urls: images
    })
  }
  onLoad(async (options) => {
  if (options && options.id) {
    try {
      const res = await getForumPostDetailAPI(options.id)
      if (res && res.data) {
        Object.assign(post.value, res.data)
      }
    } catch (e) {
      // 错误处理
    }
  }
})
  const toggleLike = () => {
    post.value.isLiked = !post.value.isLiked
    post.value.likes += post.value.isLiked ? 1 : -1
  }
  
  const toggleCollect = () => {
    post.value.isCollected = !post.value.isCollected
  }
  
  const sendComment = () => {
    if (!commentText.value.trim()) {
      uni.showToast({ title: '请输入评论内容', icon: 'none' })
      return
    }
    comments.value.unshift({
      id: Date.now(),
      username: '我',
      avatar: '/src/static/user-avatar.png',
      time: '刚刚',
      content: commentText.value
    })
    commentText.value = ''
    post.value.comments += 1
    // 评论后自动聚焦输入框
    nextTick(() => {
      if (commentInputRef.value && commentInputRef.value.focus) {
        commentInputRef.value.focus()
      }
    })
  }
  </script>
  
  <style scoped lang="scss">
  @import '@/uni.scss';
  
  .forum-detail-page {
    background: $uni-bg-color-grey;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 120rpx;
  }
  
  .detail-header {
    display: flex;
    align-items: center;
    padding: 32rpx 32rpx 0 32rpx;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  }
  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    margin-left: 24rpx;
    color: $uni-text-color;
  }
  
  .post-detail-card {
    background: #fff;
    border-radius: 24rpx;
    margin: 32rpx;
    padding: 40rpx 32rpx 32rpx 32rpx;
    box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
  }
  .detail-user-info {
    display: flex;
    align-items: center;
    gap: 20rpx;
    margin-bottom: 24rpx;
  }
  .detail-avatar {
    width: 72rpx;
    height: 72rpx;
    border-radius: 50%;
  }
  .detail-user-meta {
    display: flex;
    flex-direction: column;
  }
  .detail-username {
    font-size: 28rpx;
    font-weight: 600;
    color: $uni-text-color;
  }
  .detail-meta-row {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-top: 8rpx;
  }
  .detail-time {
    font-size: 24rpx;
    color: $uni-text-color-grey;
  }
  .detail-category {
    padding: 8rpx 16rpx;
    border-radius: 12rpx;
    font-size: 22rpx;
    color: #fff;
    &.category-experience { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
    &.category-tech { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
    &.category-job { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
    &.category-study { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
    &.category-career { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
    &.category-skills { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); color: #333; }
    &.category-default { background: #999; }
  }
  .detail-content {
    margin-bottom: 24rpx;
  }
  .detail-title {
    font-size: 34rpx;
    font-weight: 700;
    color: $uni-text-color;
    margin-bottom: 18rpx;
    display: block;
  }
  .detail-body {
    font-size: 28rpx;
    color: $uni-text-color-grey;
    line-height: 1.7;
    margin-bottom: 20rpx;
    display: block;
    white-space: pre-line;
  }
  .detail-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
  }
  .detail-image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 12rpx;
    object-fit: cover;
  }
  .detail-stats {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 24rpx;
    border-top: 1rpx solid #f0f0f0;
    margin-top: 16rpx;
  }
  .stat-item {
    display: flex;
    align-items: center;
    gap: 8rpx;
    cursor: pointer;
    padding: 8rpx 16rpx;
    border-radius: 16rpx;
    transition: background 0.2s;
    &:active {
      background: $uni-bg-color-hover;
    }
  }
  .stat-text {
    font-size: 24rpx;
    color: $uni-text-color-grey;
    &.liked {
      color: #ff4757;
    }
    &.collected {
      color: #ffd700;
    }
  }
  
  .comments-section {
    margin: 0 32rpx 32rpx 32rpx;
    background: #fff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  }
  .comments-title {
    font-size: 28rpx;
    font-weight: 600;
    color: $uni-text-color;
    margin-bottom: 24rpx;
    display: block;
  }
  .no-comments {
    color: $uni-text-color-grey;
    font-size: 26rpx;
    text-align: center;
    padding: 40rpx 0;
  }
  .comment-card {
    display: flex;
    align-items: flex-start;
    gap: 20rpx;
    margin-bottom: 32rpx;
  }
  .comment-avatar {
    width: 56rpx;
    height: 56rpx;
    border-radius: 50%;
  }
  .comment-content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .comment-header {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 8rpx;
  }
  .comment-username {
    font-size: 26rpx;
    font-weight: 600;
    color: $uni-text-color;
  }
  .comment-time {
    font-size: 22rpx;
    color: $uni-text-color-grey;
  }
  .comment-text {
    font-size: 26rpx;
    color: $uni-text-color-grey;
    line-height: 1.6;
  }
  
  .comment-input-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 16rpx 32rpx 32rpx 32rpx;
    box-shadow: 0 -2rpx 8rpx rgba(0,0,0,0.04);
    z-index: 100;
  }
  .comment-input {
    flex: 1;
    background: $uni-bg-color-grey;
    border-radius: 24rpx;
    padding: 18rpx 24rpx;
    font-size: 26rpx;
    border: none;
    outline: none;
    margin-right: 16rpx;
  }
  .send-btn {
    background: linear-gradient(135deg, $uni-color-primary 0%, #0056b3 100%);
    color: #fff;
    border: none;
    border-radius: 24rpx;
    padding: 0 36rpx;
    height: 64rpx;
    font-size: 28rpx;
    font-weight: 600;
    box-shadow: 0 4rpx 12rpx rgba(0,122,255,0.12);
    transition: opacity 0.2s;
    &:active {
      opacity: 0.8;
    }
  }
  </style>